 <!--
* description: 车辆管理-仓库
* author: liguanyu
* createdDate:
-->
<template>
  <div class="app-container app-container-table">
    <el-dialog
      v-dialogDrag
      :title="topName"
      :visible="popupsVisible"
      width="70%"
      center
      :append-to-body="true"
      :close-on-click-modal="false"
      :lock-scroll="true"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="topName"
        :style-type="$store.state.app.dialogType"
      />

      <one-table-template
        ref="multipleTable"
        :dynamic-api-config="apiConfig"
        :dynamic-buttons="tableButtons"
        :dynamic-components="tableComponents"
        :dynamic-table-cols="tableCols"
        :dynamic-form-fields="formField"
        :dynamic-table-defult-height="300"
        :dynamic-is-show-more-btn="false"
        :dynamic-is-show-select="false"
        :callback-obj="callbackObj"
        @hiddenColData="hiddenColData"
      />
    </el-dialog>
  </div>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import api from '@/api/vehicleManagement'
import Vue from 'vue'

export default {
  name: 'BigAreaName',

  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader') // 弹窗标题,
  },

  mixins: [oneTableWithViewTemplateMixins],

  props: {
    valueObject: { type: Object, default: () => { return {} } },
    popupsVisible: { type: Boolean, default: false },
    code: { type: String, default: '' },
    comType: { type: String, default: '' },
    codeField: { type: String, default: '' },
    popupsKey: { type: String, default: '' },
    isMul: { type: Boolean, default: true },
    validrule: {
      type: Object,
      default: () => {}
    }
  },

  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ''],
      function() {
        next()
      })
  },

  data() {
    const viewPageCode = this.$route.path

    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])

    return {
      topName: '仓库选择',

      // 网格查询API配置对象
      apiConfig: {
        ServiceCode: 'queryBigArea',
        APIUrl: '/mp/e3sh/vesale/common/geographicDataService/ListOfWarehouse.do',
        variables: { }
      },

      // 动态组件-按钮
      tableButtons: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
        : [
          {
            compKey: 'btnKey1',
            type: 'primary',
            size: 'small',
            name: 'search',
            clickEvent: () => this.queryTable(1),
            text: this.$t('sys.button.query'),
            position: 'component',
            fuzzySearch: true
          },
          {
            compKey: 'btnKey2',
            type: '',
            size: 'small',
            name: 'reset',
            clickEvent: this.reset,
            text: this.$t('sys.button.reset'),
            position: 'component'
          }
        ],

      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '仓库编码：',
              codeField: 'stockCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '仓库名称：',
              codeField: 'stockName',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true
            }
          ],

      tableCols: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
        : [
          {
            prop: 'updateControlId',
            label: '并发控制ID',
            hidden: true,
            alwaysHidden: true
          },
          {
            prop: 'stockCode',
            label: '仓库编码'
          },
          {
            prop: 'stockName',
            label: '仓库名称'
          }
        ],

      formField: this.$utils.getFormField(this, {
        stockName: '',
        stockCode: '',
        warehouseId: '5'
      }, this.$ConfigCache.CacheConfig.cacheData[viewPageCode]),

      callbackObj: {
        onRowDbClick: (row, column, event) => {
          this.sendCode(row)
        }
      }

    }
  },
  mounted() {
    if (this.valueObject) {
      this.formField.warehouseId = this.valueObject.warehouseId
    }
    this.$nextTick(() => {
      this.queryTable(1)
    })
  },
  methods: {
    sendCode(row) {
      // 获取嵌套组件的选中的值
      this.$emit('save', row)
      this.closeEdit()
    },

    // 关闭弹窗
    closeEdit(type) {
      this.$emit('close', type)
    },

    hiddenColData(data) {
      if (data && data.length > 0) {
        this.refreshTableKey += 1
        this.dynamicTableCols = data
      }
    }
  }
}
</script>
